* {
    /*设置内边距为0*/
    padding: 0;
    /*设置外边距为0*/
    margin: 0;
    /*设置盒子的padding和border由自己设置*/
    box-sizing: border-box;
    /*去除下划线*/
    text-decoration: none;
    /*去除<li>的点*/
    list-style: none;
}

#top {
    /*设置为flex布局*/
    display: flex;
    /*设置外边框有百分之1的宽度*/
    margin: 1%;
}

/*logo*/
#top > div {
    flex: 1; /* 使用 Flexbox 布局，并将该 div 的 flex 属性设置为 1，以占据可用空间的比例（灵活伸缩）。 */
    display: flex; /* 将该 div 设置为 Flex 容器，其直接子元素将成为 Flex 项。 */
    justify-content: center; /* 在 Flex 容器中，使 Flex 项在主轴上居中对齐。 */
    align-items: center; /* 在 Flex 容器中，使 Flex 项在交叉轴上居中对齐。 */
}


#top > div > p {
    font-family: 楷体; /* 设置字体为“楷体”（请确保该字体在用户系统中可用）。 */
    font-size: 35px; /* 设置字体大小为 35 像素。 */
    font-weight: bold; /* 设置字体粗细为粗体。 */
    text-align: center; /* 文本居中对齐。 */
    display: flex; /* 将该 <p> 元素设置为 Flex 容器，使其内部的内容具有 Flexbox 布局的特性。 */
    line-height: 100px; /* 设置行高为 100 像素，使文字在垂直方向上居中显示。也可以根据实际需要设置合适的行高。 */
}


#top > div > p > img {
    /*设置高度为100px*/
    height: 100px;
}

/*中间搜索框*/
#top > label {
    flex: 1; /* 使用 Flexbox 布局，并将该 label 的 flex 属性设置为 1，以占据可用空间的比例（灵活伸缩）。 */
    display: flex; /* 将该 label 设置为 Flex 容器，其直接子元素将成为 Flex 项。 */
    justify-content: center; /* 在 Flex 容器中，使 Flex 项在主轴上居中对齐。 */
    align-items: center; /* 在 Flex 容器中，使 Flex 项在交叉轴上居中对齐。 */
}


#top > label > input {
    font-size: 18px; /* 设置字体大小为18像素 */
    height: 55%; /* 设置高度为父元素高度的55% */
    width: 60%; /* 设置宽度为父元素宽度的60% */
}

#top > label > button {
    height: 55%; /* 设置高度为父元素高度的55% */
    width: 15%; /* 设置宽度为父元素宽度的15% */
}

#top > label > button:hover {
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

/*导航栏*/
#top > ul {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex: 1.5; /* 设置弹性因子为1.5 */
}

#top > ul > li {
    border-radius: 10px; /* 设置边框圆角为10像素 */
    text-align: center; /* 文本居中对齐 */
    font-family: 楷体; /* 使用楷体字体 */
    font-size: 20px; /* 设置字体大小为20像素 */
    padding: 3% 1% 3% 1%; /* 设置内边距 */
    flex: 1; /* 设置弹性因子为1 */
    font-weight: bold; /* 设置字体加粗 */
}

#top > ul > li:hover {
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    color: white; /* 设置文字颜色为白色 */
    background-color: #999999; /* 设置背景颜色为灰色 */
}

#title {
    font-size: 40px; /* 设置字体大小为40像素 */
    font-weight: bold; /* 设置字体加粗 */
    font-family: 楷体; /* 使用楷体字体 */
    text-align: center; /* 文本居中对齐 */
}

#centerUp {
    position: relative; /* 设置相对定位 */
    margin: 2% 0; /* 设置上下边距 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.slider {
    width: 600px; /* 设置宽度为600像素 */
    overflow: hidden; /* 隐藏溢出部分 */
    background: black; /* 设置背景颜色为黑色 */
}

.slider-wrapper {
    width: 100%; /* 设置宽度为100% */
    height: 320px; /* 设置高度为320像素 */
}

.slider-wrapper img {
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
    display: block; /* 设置为块级元素 */
}

.slider-footer {
    height: 80px; /* 设置高度为80像素 */
    background-color: #34404e; /* 设置背景颜色为深蓝灰色 */
    padding: 12px 12px 0 12px; /* 设置内边距 */
    position: relative; /* 设置相对定位 */
}

.slider-footer .toggle {
    position: absolute; /* 设置绝对定位 */
    right: 0; /* 设置距离右侧为0 */
    top: 12px; /* 设置距离顶部为12像素 */
    display: flex; /* 使用弹性布局 */
}

.slider-footer .toggle button {
    margin-right: 12px; /* 设置右边距为12像素 */
    width: 28px; /* 设置宽度为28像素 */
    height: 28px; /* 设置高度为28像素 */
    appearance: none; /* 清除默认样式 */
    border: none; /* 清除边框 */
    background: rgba(255, 255, 255, 0.1); /* 设置背景颜色为白色透明 */
    color: #fff; /* 设置文字颜色为白色 */
    border-radius: 4px; /* 设置边框圆角为4像素 */
    cursor: pointer; /* 设置鼠标样式为手型 */
}

.slider-footer .toggle button:hover {
    background: rgba(255, 255, 255, 0.2); /* 设置悬停时的背景颜色 */
}

.slider-footer p {
    color: #fff; /* 设置文字颜色为白色 */
    font-size: 18px; /* 设置字体大小为18像素 */
    margin: 0 0 10px; /* 设置外边距 */
}

.slider-indicator {
    margin: 0; /* 清除外边距 */
    padding: 0; /* 清除内边距 */
    list-style: none; /* 清除列表样式 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
}

.slider-indicator li {
    width: 8px; /* 设置宽度为8像素 */
    height: 8px; /* 设置高度为8像素 */
    margin: 4px; /* 设置外边距 */
    border-radius: 50%; /* 设置边框圆角为50% */
    background: #fff; /* 设置背景颜色为白色 */
    opacity: 0.4; /* 设置透明度为0.4 */
    cursor: pointer; /* 设置鼠标样式为手型 */
}

.slider-indicator li.active {
    width: 12px; /* 设置宽度为12像素 */
    height: 12px; /* 设置高度为12像素 */
    opacity: 1; /* 设置透明度为1 */
}

#centerDown {
    width: 100%; /* 设置宽度为100% */
    height: 940px; /* 设置高度为940像素 */
    background-image: url('../img/blue.png'); /* 设置背景图片路径 */
    background-size: cover; /* 设置为 cover，使背景图片完全覆盖元素 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-position: center; /* 将背景图片居中显示 */
}

#box {
    width: 80%; /* 设置宽度为80% */
    margin: 0 auto; /* 设置左右边距自动，实现水平居中 */
    height: 10px; /* 设置高度为10像素 */
    display: flex; /* 使用弹性布局 */
}

.littleBox {
    margin: 20% 1.5%; /* 设置外边距 */
    height: 533px; /* 设置高度为533像素 */
    flex: 1; /* 设置弹性因子为1 */
    overflow: hidden; /* 隐藏溢出部分 */
    position: relative; /* 设置相对定位 */
    background-color: #fff; /* 设置背景颜色为白色 */
}

.littleBox > .imge {
    position: absolute; /* 设置绝对定位 */
    z-index: 2; /* 设置 z-index 为2，使图片位于最上层 */
}

.littleBox > .font {
    position: absolute; /* 设置绝对定位 */
    left: 10%; /* 设置左侧距离为10% */
    bottom: 4%; /* 设置底部距离为4% */
    color: transparent; /* 设置文字颜色为透明 */
    font-size: 19px; /* 设置字体大小为19像素 */
    z-index: 3; /* 设置 z-index 为3，使文字位于最上层 */
}

.littleBox:hover .imge {
    transform: translateX(-320px); /* 设置水平位移 */
    transition: transform 2s ease-in-out; /* 设置过渡效果 */
}

.littleBox:hover .font {
    color: #ffd4d4; /* 设置文字颜色为淡红色 */
}

footer {
    margin: 1% 0 3% 0; /* 设置外边距 */
    color: #999999; /* 设置文字颜色为灰色 */
    text-align: center; /* 文本居中对齐 */
}

footer > img {
    width: 100%; /* 设置宽度为100% */
}
